<template>
  <div style="padding: 20px">
    <Alert message="下拉选择器示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
    </Alert>
    <div class="demoTittle">下拉选择</div>
    <a-space>
      <a-select
        ref="select"
        v-model:value="value1"
        placeholder="请选择"
        style="width: 160px"
        :options="options1"
        :allow-clear="true"
      ></a-select>
      <a-select
        ref="select"
        v-model:value="value2"
        placeholder="请选择"
        style="width: 160px"
        :options="options1"
        :allow-clear="true"
        :disabled="true"
      ></a-select>
      <div>
        模糊查询
        <a-select
          v-model:value="value3"
          show-search
          placeholder="请选择"
          style="width: 240px"
          :options="options2"
          :allow-clear="true"
          notFoundContent="查无此人"
        ></a-select>
      </div>

      <a-select
        v-model:value="value4"
        mode="multiple"
        :max-tag-count="3"
        style="width: 240px"
        placeholder="请选择"
        :options="[...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))"
      ></a-select>
    </a-space>
    <div class="demoTittle">多结构下拉选择</div>
    <a-cascader
      v-model:value="value5"
      :options="options3"
      placeholder="请选择"
      style="width: 240px"
    />
    <div class="demoTittle">联动</div>
    <div class="demoTittle2">- 省市联动是典型的例子;</div>
    <div class="demoTittle2" style="margin-bottom: 20px">- 选框间间距8PX;</div>
    <a-space :size="8">
      <a-select
        v-model:value="province"
        style="width: 120px"
        :options="provinceData.map((pro) => ({ value: pro }))"
      ></a-select>
      <a-select
        v-model:value="secondCity"
        style="width: 120px"
        :options="cities.map((city) => ({ value: city }))"
      ></a-select>
    </a-space>
    <div class="demoTittle">多选下拉树结构</div>
    <a-tree-select
      v-model:value="value6"
      style="width: 240px"
      :tree-data="treeData"
      tree-checkable
      allow-clear
      placeholder="请选择"
      tree-node-filter-prop="label"
    />
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import { computed, ref, watch } from 'vue';
  import type { SelectProps } from 'ant-design-vue';
  import type { CascaderProps } from 'ant-design-vue';
  import type { TreeSelectProps } from 'ant-design-vue';
  import { TreeSelect } from 'ant-design-vue';
  // const SHOW_PARENT = TreeSelect.SHOW_PARENT;

  const value1 = ref();
  const value2 = ref('禁用');
  const value3 = ref();
  const value4 = ref();
  const value5 = ref();
  const value6 = ref<string[]>(['0-0-0']);

  const options1 = ref<SelectProps['options']>([
    {
      value: '1',
      label: '操作一',
    },
    {
      value: '2',
      label: '操作二',
    },
    {
      value: '3',
      label: '操作三',
    },
    {
      value: '4',
      label: '操作四',
    },
  ]);
  const options2 = ref<SelectProps['options']>([
    { value: 'jack', label: 'Jack' },
    { value: 'lucy', label: 'Lucy' },
    { value: 'tom', label: 'Tom' },
  ]);
  const options3: CascaderProps['options'] = [
    {
      value: '浙江',
      label: '浙江',
      children: [
        {
          value: '杭州',
          label: '杭州',
          children: [
            {
              value: '西湖',
              label: '西湖',
            },
          ],
        },
      ],
    },
    {
      value: '江苏',
      label: '江苏',
      children: [
        {
          value: '南京',
          label: '南京',
          children: [
            {
              value: '中华门',
              label: '中华门',
            },
          ],
        },
      ],
    },
  ];
  const provinceData = ['浙江', '江苏'];
  const cityData = {
    浙江: ['杭州', '宁波', '温州'],
    江苏: ['南京', '苏州', '镇江'],
  };
  const province = ref(provinceData[0]);
  const secondCity = ref(cityData[province.value][0]);
  const cities = computed(() => {
    return cityData[province.value];
  });

  const treeData: TreeSelectProps['treeData'] = [
    {
      label: 'Node1',
      value: '0-0',
      children: [
        {
          label: 'Child Node1',
          value: '0-0-0',
        },
      ],
    },
    {
      label: 'Node2',
      value: '0-1',

      children: [
        {
          label: 'Child Node3',
          value: '0-1-0',
        },
        {
          label: 'Child Node4',
          value: '0-1-1',
        },
        {
          label: 'Child Node5',
          value: '0-1-2',
        },
      ],
    },
  ];

  watch(province, (val) => {
    secondCity.value = cityData[val][0];
  });
</script>

<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }

  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
  }

  .ant-select-single.ant-select-open .ant-select-selection-item {
    color: #444444;
  }

  .ant-select-disabled:where(.css-dev-only-do-not-override-thtrp8).ant-select:not(
      .ant-select-customize-input
    )
    .ant-select-selector {
    color: #444444;
  }

  :where(.css-dev-only-do-not-override-thtrp8).ant-select-dropdown .ant-select-item-empty {
    text-align: center;
    color: #999999;
  }
</style>
